﻿<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=mTePrDFVkrXBzMWmNCdemNTp"></script>
@{
    Layout = "~/Views/Shared/_LayoutPageEmpty.cshtml";
}

@model Customers
<div class="ld-map" id="BaiduMap">

</div>
<div class="ld-map-list">
    @foreach (Customer c in Model.Items)
    {
        <a href="javascript:void(0)" id="@c.CustomerId" X="@c.X" Y="@c.Y" CustomerNo="@c.CustomerNo">
            <label>@c.CustomerNo-@c.CustomerName</label><br />
            <span>@c.Address</span>
        </a>
    }
</div>
<script type="text/javascript">
    var map = function () {
        //百度地图API功能
        var map = new BMap.Map("BaiduMap"); // 创建Map实例
        map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
        map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
        map.addControl(new BMap.NavigationControl()); //添加地图缩放控件
        //map.addControl(new BMap.ScaleControl());
        map.addControl(new BMap.OverviewMapControl());
        map.setDefaultCursor("url('bird.cur')"); //设置地图默认的鼠标指针样式
        map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
        map.addEventListener("click", function (e) {
            //alert(e.point.lng + "," + e.point.lat);
        });

        var markers = {};
        $(".ld-map-list").find("a[X]").each(function (index, ret) {
            var $this = $(ret);
            var id = $this.attr("id");
            var x=$this.attr("X");
            var y = $this.attr("Y");
            var CustomerNo = $this.attr("CustomerNo");
            var marker = new BMap.Marker(new BMap.Point(x,y));
            map.addOverlay(marker);
            marker.setLabel(new BMap.Label(CustomerNo, { offset: new BMap.Size(20, -10) }));
            markers[id] = marker;
        });
        $(".ld-map-list").find("a[X]").bind("click", function () {
            var $this = $(this);
            var id = $this.attr("id");
            for (var k in markers) {
                markers[k].setAnimation(null);
            }
            map.panTo(markers[id].point);
            map.zoomTo(20);
            markers[id].setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
            //markers[id].addEventListener("click", function () {
            //    map.zoomTo(20);
            //});
        });

        function myFun(result) {
            var cityName = result.name;
            map.setCenter(cityName);
            var marker = new BMap.Marker(new BMap.Point(result.center.lng, result.center.lat)); // 创建标注
            //map.addOverlay(marker);
            //marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
        }

        var myCity = new BMap.LocalCity();
        myCity.get(myFun);
    };

    $(function () {
        map();
    });
</script>